<template>
  <div>
    <div class="titleh1">
      <code />运单详情
    </div>
    <el-form ref="form" :model="form" label-width="100px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="装货人">
            <el-input v-model="form.shipperName" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系电话">
            <el-input v-model="form.shipperPhone" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="装货地址">
            <el-input v-model="form.shipperAddress" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="装货详细地址">
            <el-input v-model="form.shipperDetailAddress" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="收货人">
            <el-input v-model="form.consigneeName" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="收货电话">
            <el-input v-model="form.consigneePhone" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="收货地址">
            <el-input v-model="form.consigneeAddress" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="收货详细地址">
            <el-input v-model="form.consigneeDetailAddress" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="货物名称">
            <el-input v-model="form.coalTypeName" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="运输要求">
            <el-input v-model="form.coalName" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="公里数">
            <el-input v-model="form.distance" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>
      <div class="titleh1">
        <code />订单信息
      </div>
      <el-row>
        <el-col :span="6">
          <el-form-item label="订单编号">
            <el-input v-model="form.orderCode" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="订单状态">
            <el-input v-model="form.status" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="装货日期">
            <el-input v-model="form.fillTime" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="卸货日期">
            <el-input v-model="form.signTime" :disabled="true" />
          </el-form-item>
        </el-col>

      </el-row>
      <el-row />
      <el-row>
        <el-col :span="6">
          <el-form-item label="装货数量">
            <el-input v-model="form.loadQuantity" :disabled="true">
              <template slot="append">{{ form.coalUnitName }}</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="卸货数量">
            <el-input v-model="form.unloadQuantity" :disabled="true">
              <template slot="append">{{ form.coalUnitName }}</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="实际损耗">
            <el-input v-model="form.wastage" :disabled="true">
              <template slot="append">{{ form.coalUnitName }}</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="货物单价">
            <el-input v-model="form.coalPrice" :disabled="true">
              <template slot="append">{{ form.isTrunkName }}</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="isDriverOrAdmin">
        <el-col :span="6">
          <el-form-item label="司机应收金额">
            <el-input v-model="form.deliveryFeeDeserved" :disabled="true">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="司机实收现金">
            <el-input v-model="form.deliveryCashFee" :disabled="true">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="已预付现金">
            <el-input v-model="form.payAmount" :disabled="true">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="已打款现金">
            <el-input v-model="form.allotAmount" :disabled="true">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="isDriverOrAdmin">
        <el-col :span="6">
          <el-form-item label="承运单价">
            <el-input v-model="form.realPrice" :disabled="true">
              <template slot="append">{{ form.isTrunkName }}</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="司机实收运费">
            <el-input v-model="form.deliveryFeePractical" :disabled="true">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="已预付油点">
            <el-input v-model="form.payOil" :disabled="true">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="已分配油点">
            <el-input v-model="form.allotOil" :disabled="true">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="isShipmentOrAdmin">
        <el-col :span="6">
          <el-form-item label="入驻商应付金额">
            <el-input v-model="form.taxFee" :disabled="true">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="入驻商实付运费">
            <el-input v-model="form.shipperDeliveryFee" :disabled="true">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="入驻商已付金额">
            <el-input v-model="form.allotTaxAmount" :disabled="true">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="入驻商预付金额">
            <el-input v-model="form.payTaxAmount" :disabled="true">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col v-if="isShipmentOrAdmin" :span="6">
          <el-form-item label="发货单价">
            <el-input v-model="form.taxPrice" :disabled="true">
              <template slot="append">{{ form.isTrunkName }}</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="其他费用">
            <el-input v-model="form.extraFee" :disabled="true">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="异常费用">
            <el-input v-model="form.abnormalFee" :disabled="true">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="上传装货位置">
            <el-input v-model="form.loadPlace" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="上传卸货位置">
            <el-input v-model="form.unloadPlace" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>
      <div class="titleh1">
        <code />回单
      </div>
      <el-row>
        <el-col :span="24">
          <el-form-item label="装货照片">
            <div class="demo-image">
              <div v-for="url in form.fillImageInfoList" :key="url" style="display: inline-block; padding: 0 4px 4px 0;">
                <el-image v-if="url&&url!=''"
                  style="width: 100px; height: 100px"
                  :src="url"
                  :preview-src-list="form.fillImageInfoList"
                />
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="卸货照片">
            <div class="demo-image">
              <div v-for="url in form.signImageInfoList" :key="url" style="display: inline-block; padding: 0 4px 4px 0;">
                <el-image v-if="url&&url!=''"
                  style="width: 100px; height: 100px"
                  :src="url"
                  :preview-src-list="form.signImageInfoList"
                />
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="回单照片">
            <div class="demo-image">
              <div v-for="url in form.receiptImageUrls" :key="url" style="display: inline-block; padding: 0 4px 4px 0;">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="url"
                  :preview-src-list="form.receiptImageUrls"
                />
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="回单号">
            <el-input v-model="form.receiptNum" :disabled="true" placeholder="回单号" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="titleh1">
      <code />轨迹
    </div>
    <el-row>
      <el-col :span="18">
        <div>
          <el-steps direction="vertical" :active="1">
            <el-step
              v-for="item in orderTraceList"
              :key="item.code"
              style="min-height:50px"
              :description="item.content +'    '+ item.gmtCreated"
            />
          </el-steps>
        </div>
      </el-col>
      <el-col :span="6" v-if="track">
        <el-image
              style="width: 160px; height: 160px;cursor: pointer;"
              :src="imgUrl"
              @click="uploadClick"
              ></el-image>
      </el-col>
    </el-row>
    <div class="titleh1">
      <code />评价
    </div>
    <el-row>
      <el-col :span="12">
        <p>司机评价入驻商</p>
        <p v-for="item in commentToShipmentList" :key="item.id">{{ item.commentContent }}</p>
      </el-col>
      <el-col :span="12">
        <p>入驻商评价司机</p>
        <p v-for="item in commentToDriverList" :key="item.id">{{ item.commentContent }}</p>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { OrderDetails } from '@/api/transport'

export default {
  data() {
    return {
      code:'',
      track:false,
      isShipmentOrAdmin: false,
      isDriverOrAdmin: false,
      orderDetailStatusMap: {
        '1': '已接单',
        '2': '已装货',
        '3': '已卸货',
        '4': '已结算',
        '5': '已打款'
      },
      form: {},
      orderTraceList: [],
      commentToShipmentList: [],
      commentToDriverList: [],
      imgUrl:require("../../assets/queueingSystem/summary_web_banner.png")
    }
  },
  created() {
    const partyType = this.$store.getters.party.partyType
    const isAdmin = partyType == 'SUPER_ADMIN' || partyType == 'PLAT_ADMIN' || partyType == 'STAFF'
    this.isShipmentOrAdmin = partyType == 'SHIPMENT' || partyType == 'SHIPMENT_COMPANY' || isAdmin
    this.isDriverOrAdmin = partyType == 'DRIVER' || partyType == 'DRIVER_LEADER' || isAdmin
  },
  methods: {
    Getdetails(code,track) {
      console.log(code, track)
      this.code = code;
      this.track = track;
      this.form = {}
      OrderDetails(code).then(response => {
        this.form = Object.assign({}, response.data.order, response.data.orderDetail)
        this.form.fillImageInfoList = response.data.fillImageInfoList
        this.form.signImageInfoList = response.data.signImageInfoList
        this.form.receiptImageUrls = response.data.receiptImageUrls
        this.orderTraceList = response.data.orderTraceList
        this.commentToShipmentList = response.data.commentToShipmentList
        this.commentToDriverList = response.data.commentToDriverList
        this.form.status = this.orderDetailStatusMap[
          this.form.status
        ]
      })
    },
    uploadClick(){
      this.$emit('openMap',this.code);
    },
  }
}
</script>

<style lang="scss" scoped>
  .titleh1 {
    line-height: 50px;
    border-bottom: 1px solid #e2e2e2;
    margin-bottom: 15px;

    code {
      width: 5px;
      height: 20px;
      background-color: #ff7f21;
      float: left;
      margin-right: 5px;
      margin-top: 13px;
    }
  }

  .el-autocomplete {
    width: 81%;
  }

  .el-cascader {
    width: 100%;
  }

  .el-select {
    width: 100%;
  }

</style>
